<template>
    <van-cell-group inset>
        <van-cell>
            <template #title>
                <div class="cell">
                    <van-image width="100" height="100" :src="user?.avatar==undefined?'':`/api${user?.avatar}`"/>
                    <div class="user-info">
                        <h2>{{ user?.name }}</h2>
                        <p><span>vv:</span>{{ user?.account }}</p>
                    </div>
                </div>

            </template>
        </van-cell>
        <van-cell title="性别" :value="user?.sex ==1?'男':'女'"/>
        <van-cell>
            <template #title>
                <div class="cell">
                    <div class="user-sign">
                        <h3>个性签名：</h3>
                        <p>{{ user?.individuality }}</p>
                    </div>
                </div>

            </template>
        </van-cell>
    </van-cell-group>
    <!--编辑信息-->
    <van-cell-group inset>
        <van-cell title="编辑信息" icon="setting-o" is-link style="" @click="router.push({name:'userEdit'})"/>
    </van-cell-group>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {useLoginStore} from "../../../store/login";
import {ref} from "vue";
import {UserInfo} from "../../../type/user";

// 实例化路由
const router = useRouter()

// 实例化仓库
const loginStore = useLoginStore()

loginStore.getUserInfo()

const user = ref<UserInfo>()

// 订阅仓库
loginStore.$subscribe((mutation, state) => {

    user.value = state.user
})
</script>

<style scoped lang="less">
.cell {
    display: flex;
    align-items: center;

    .user-info {
        padding-left: 2rem;
        //账号样式
        p {
            margin-top: 5px;
            color: #8d8d8d;
            font-size: 1rem;

            span {
                margin-right: 5px;
            }
        }

    }

    .user-sign {
        p {
            margin-top: 5px;
            //color: #8d8d8d;
            font-size: 1rem;

            span {
                margin-right: 5px;
            }
        }
    }
}
</style>